<template>
  <div class="content" :style="{width}">
    <div v-html="content" class="ql-editor" />
  </div>
</template>

<script>
  import 'quill/dist/quill.snow.css'
  export default {
    props: {
      content: String,
      width: String
    }
  }
</script>

<style lang='scss' scoped>
  .content {
    width: 375px;
    /* height: 600px; */
    /* border: 0.5px solid lightgray; */
    /* padding: 10px; */
    overflow: hidden;
    overflow-y: auto;

    :deep(video) {
      max-width: 100% !important;
      display: block;
    }

    :deep(img) {
      max-width: 100% !important;
      display: block;
    }

    :deep(iframe) {
      max-width: 100% !important;
      height: 100% !important;
    }
    
    :deep(.ql-editor) {
      padding: 0;
    }
  }
</style>